* {
    padding: 0;
    margin: 0;
}

/*html{ height: 100%; }*/

body {
    min-height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 183.8px auto 128.65px;
    background: #f2f2f2;
}

main {
    display: grid;
    grid-template-columns: 18% 64% 18%;
    grid-template-areas:
    "tools main pda";
    /* The tool and pda widgets rely on grid-template-areas to name 'tools' and 'pda', do not modify them. */

    & .art-collection{
        grid-area: main;
        display: grid;
        grid-template-columns: repeat(5, 215px);
        grid-template-rows: 245px; /* Auto? + extended line logic */
        row-gap: 10px;
        list-style: none;
        justify-self: center;
        justify-items: center;
        margin: 1%;

        & li{
            height: fit-content;
            width: fit-content;

            & a {

                & img{
                    height: 200px;
                    width: 200px;
                    border-radius: 10px;
                }
            }
            
            & .art-title{
                width: 200px;
                overflow-x: hidden;
                white-space: nowrap;
                scroll-behavior: smooth;
            }
        }
    }
}